<template>
  <div class="detail-container">
    <div class="left-part">
      <div class="course-detail">
        <h1>课程详情</h1>
        <!-- 这里放置课程的详细信息展示 -->
        <p>课程名称: {{ course.name }}</p>
        <p>教师: {{ course.teacherId }}</p>
        <p>学分: {{ course.credit }}</p>
        <p>年级: {{ course.grade }}</p>
        <p>时间: {{ course.time }}</p>
        <p>地点: {{ course.location }}</p>
        <p>考试日期: {{ course.examDate }}</p>
      </div>
    </div>

    
    <div class="right-part">
      <div class="coursemanage-container1">
        <div class="send-notification1"></div>
        <div class="upload-file1">
            <div class="favorites-section1">
              <h3 class="favorites-title1">课程资源</h3>
              <div class="folder1">
                <h4 class="folder-title1">资源列表</h4>
                  <div class="files-container1">
                    <div
                        class="file-item1"
                        v-for="(note, noteIndex) in favoriteFolder.notes"
                        :key="noteIndex"
                    >
                      <h4 class="note-title1">{{ note.title }}</h4>
                      <p class="note-content1">{{ note.content }}</p>
                      <p class="note-file-id1">文件ID: {{ note.id }}</p>

                      <button @click="openFile(note)" class="open-file-btn1">打开文件</button>
                      <button @click="downloadFile(note.id)" class="download-btn1">下载</button>
                    </div>
                  <div class="no-files1" v-if="favoriteFolder.notes.length === 0">没有文件</div>
                  </div>
        
              </div>
            </div>
        </div>
      </div>


      <div class="coursemanage-container2">
        <div class="send-notification2"></div>
        <div class="upload-file2">
            <div class="favorites-section2">
              <h3 class="favorites-title2">历年试卷库</h3>
              <div class="folder2">
                <h4 class="folder-title2">试卷列表</h4>
                  <div class="files-container2">
                    <div
                        class="file-item2"
                        v-for="(note, noteIndex) in favoriteFolder.notes"
                        :key="noteIndex"
                    >
                      <h4 class="note-title2">{{ note.title }}</h4>
                      <p class="note-content2">{{ note.content }}</p>
                      <p class="note-file-id2">文件ID: {{ note.id }}</p>

                      <button @click="openFile(note)" class="open-file-btn2">打开文件</button>
                      <button @click="downloadFile(note.id)" class="download-btn2">下载</button>
                    </div>
                  <div class="no-files2" v-if="favoriteFolder.notes.length === 0">没有文件</div>
                  </div>
        
              </div>
            </div>
        </div>
      </div>


      <div class="coursemanage-container3">
        <div class="send-notification3"></div>
        <div class="upload-file3">
            <div class="favorites-section3">
              <h3 class="favorites-title3">习题库</h3>
              <div class="folder3">
                <h4 class="folder-title3">习题列表</h4>
                  <div class="files-container3">
                    <div
                        class="file-item3"
                        v-for="(note, noteIndex) in favoriteFolder.notes"
                        :key="noteIndex"
                    >
                      <h4 class="note-title3">{{ note.title }}</h4>
                      <p class="note-content3">{{ note.content }}</p>
                      <p class="note-file-id3">文件ID: {{ note.id }}</p>

                      <button @click="openFile(note)" class="open-file-btn3">打开文件</button>
                      <button @click="downloadFile(note.id)" class="download-btn3">下载</button>
                    </div>
                  <div class="no-files3" v-if="favoriteFolder.notes.length === 0">没有文件</div>
                  </div>
        
              </div>
            </div>
        </div>
      </div>


    </div>
  </div>
  </template>
  
  <script>
  import * as api from "@/api/student/course"; // 假设你有一个 API 模块来获取课程详情
  
  export default {
    data() {
      return {
        course: {},  // 存放课程详情数据
        baseURL: "http://localhost:8085", // 封装基础URL
      searchUserId: '', // 存储搜索的用户ID
      searchedUserId: '', // 被搜索到的用户ID
      searchedUserFavorites: null, // 被搜索到的用户收藏夹
      favoriteFolder: { // 当前用户的收藏夹，增加是否公开属性和点赞数
        name: '我的收藏夹',
        notes: [], // 当前用户的收藏夹内容
        isPublic: false, // 默认不公开
        likes: 0 // 添加点赞数
      },
      selectedFile: null, // 存储用户选择的文件
      selectedFileName: '', // 存储文件名
      notifications: [ // 用户通知
        '您有一个新课程更新。',
        '请注意，您的作业截止日期已更改。',
        '系统维护将在本周末进行。'
      ],
      followingList: [] // 当前用户关注列表
      };
    },
    created() {
      this.fetchCourseDetail(); // 当组件创建时获取课程详情
    },
    methods: {
      fetchCourseData() {
      axios.get(`${this.baseURL}/courseresource/viewware`, { params: { courseId: this.courseId } })
      .then(response => {
        this.courseResources.notes = response.data.map(item => ({
          title: item.fileName,
          content: item.fileDescription,
          id: item.fileId
        }));
      });

      axios.get(`${this.baseURL}/courseresource/viewtest`, { params: { courseId: this.courseId } })
      .then(response => {
        this.examPapers.notes = response.data.map(item => ({
          title: item.fileName,
          content: item.fileDescription,
          id: item.fileId
        }));
      });

      axios.get(`${this.baseURL}/courseresource/viewexercise`, { params: { courseId: this.courseId } })
      .then(response => {
        this.exerciseBank.notes = response.data.map(item => ({
          title: item.fileName,
          content: item.fileDescription,
          id: item.fileId
        }));
      });
    }
  },

      openFile(note) {
      window.open(note.url, '_blank');
    },
    
    downloadFile(fileId) {
      axios.get(`${this.baseURL}/courseresource/download`, {
        params: {
          fileId: fileId
        },
        responseType: 'blob'
      })
      .then(response => {
        const url = window.URL.createObjectURL(new Blob([response.data]));
        const link = document.createElement('a');

        let fileName = '';
        const disposition = response.headers['content-disposition'];

        if (disposition && disposition.includes('filename=')) {
          fileName = decodeURIComponent(disposition.split('filename=')[1].replace(/['"]/g, ''));
        } else {
          fileName = fileId;
        }

        link.href = url;
        link.setAttribute('download', fileName);
        document.body.appendChild(link);
        link.click();
        document.body.removeChild(link);
      })
      .catch(error => {
        console.error('文件下载失败', error);
      });
    },




    }
  </script>
  
  <style scoped>
  .detail-container{
    display: flex;
    justify-content: space-between;
  }
  .left-part{
    width: 28%;
  }
  .right-part{
    width: 70%;
  }
  .course-detail {
    padding: 20px;
  }

  .favorites-section1 {
  margin-top: 20px;
  padding: 10px;
  background-color: #f9f9f9;
  border: 1px solid #ddd;
  border-radius: 5px;
}

.favorites-title1 {
  font-size: 20px;
  color: #333;
  margin-bottom: 10px;
}

.folder1 {
  margin: 10px;
  padding: 10px;
  background-color: #fff;
  border: 1px solid #ccc;
  border-radius: 5px;
}

.folder-title1 {
  font-size: 18px;
  color: #333;
}

.files-container1 {
  max-height: 200px; /* 限制文件区高度 */
  overflow-y: auto;
  border: 1px solid #ccc;
  border-radius: 4px;
  padding: 5px;
}

.file-item1 {
  border-bottom: 1px solid #eee;
  padding: 5px 0;
}

.note-title1 {
  font-size: 16px;
  color: #555;
  margin: 0;
}

.note-content1 {
  font-size: 14px;
  color: #777;
  margin: 5px 0;
}

.note-file-id1 {
  font-size: 12px;
  color: #888;
  margin: 5px 0;
}

.open-file-btn1,
.remove-btn1,
.add-file-btn1,
.download-btn1 {
  background-color: #f44336;
  color: white;
  border: none;
  border-radius: 4px;
  padding: 5px 10px;
  cursor: pointer;
  margin-top: 5px;
}

.open-file-btn1:hover,
.remove-btn1:hover,
.add-file-btn1:hover,
.download-btn1:hover {
  background-color: #d32f2f;
}

.no-files1,
.no-notifications1 {
  font-size: 14px;
  color: #999;
  text-align: center;
  margin-top: 10px;
}

.file-input1 {
  margin-top: 10px;
}

.add-file-btn1 {
  margin-top: 5px;
  background-color: #4CAF50;
}

.add-file-btn1:hover {
  background-color: #388E3C;
}



.favorites-section2 {
  margin-top: 20px;
  padding: 10px;
  background-color: #f9f9f9;
  border: 1px solid #ddd;
  border-radius: 5px;
}

.favorites-title2 {
  font-size: 20px;
  color: #333;
  margin-bottom: 10px;
}

.folder2 {
  margin: 10px;
  padding: 10px;
  background-color: #fff;
  border: 1px solid #ccc;
  border-radius: 5px;
}

.folder-title2 {
  font-size: 18px;
  color: #333;
}

.files-container2 {
  max-height: 200px; /* 限制文件区高度 */
  overflow-y: auto;
  border: 1px solid #ccc;
  border-radius: 4px;
  padding: 5px;
}

.file-item2 {
  border-bottom: 1px solid #eee;
  padding: 5px 0;
}

.note-title2 {
  font-size: 16px;
  color: #555;
  margin: 0;
}

.note-content2 {
  font-size: 14px;
  color: #777;
  margin: 5px 0;
}

.note-file-id2 {
  font-size: 12px;
  color: #888;
  margin: 5px 0;
}

.open-file-btn2,
.remove-btn2,
.add-file-btn2,
.download-btn2 {
  background-color: #f44336;
  color: white;
  border: none;
  border-radius: 4px;
  padding: 5px 10px;
  cursor: pointer;
  margin-top: 5px;
}

.open-file-btn2:hover,
.remove-btn2:hover,
.add-file-btn2:hover,
.download-btn2:hover {
  background-color: #d32f2f;
}

.no-files2,
.no-notifications2 {
  font-size: 14px;
  color: #999;
  text-align: center;
  margin-top: 10px;
}

.file-input2 {
  margin-top: 10px;
}

.add-file-btn2 {
  margin-top: 5px;
  background-color: #4CAF50;
}

.add-file-btn2:hover {
  background-color: #388E3C;
}



.favorites-section3 {
  margin-top: 20px;
  padding: 10px;
  background-color: #f9f9f9;
  border: 1px solid #ddd;
  border-radius: 5px;
}

.favorites-title3 {
  font-size: 20px;
  color: #333;
  margin-bottom: 10px;
}

.folder3 {
  margin: 10px;
  padding: 10px;
  background-color: #fff;
  border: 1px solid #ccc;
  border-radius: 5px;
}

.folder-title3 {
  font-size: 18px;
  color: #333;
}

.files-container3 {
  max-height: 200px; /* 限制文件区高度 */
  overflow-y: auto;
  border: 1px solid #ccc;
  border-radius: 4px;
  padding: 5px;
}

.file-item3 {
  border-bottom: 1px solid #eee;
  padding: 5px 0;
}

.note-title3 {
  font-size: 16px;
  color: #555;
  margin: 0;
}

.note-content3 {
  font-size: 14px;
  color: #777;
  margin: 5px 0;
}

.note-file-id3 {
  font-size: 12px;
  color: #888;
  margin: 5px 0;
}

.open-file-btn3,
.remove-btn3,
.add-file-btn3,
.download-btn3 {
  background-color: #f44336;
  color: white;
  border: none;
  border-radius: 4px;
  padding: 5px 10px;
  cursor: pointer;
  margin-top: 5px;
}

.open-file-btn3:hover,
.remove-btn3:hover,
.add-file-btn3:hover,
.download-btn3:hover {
  background-color: #d32f2f;
}

.no-files3,
.no-notifications3 {
  font-size: 14px;
  color: #999;
  text-align: center;
  margin-top: 10px;
}

.file-input3 {
  margin-top: 10px;
}

.add-file-btn3 {
  margin-top: 5px;
  background-color: #4CAF50;
}

.add-file-btn3:hover {
  background-color: #388E3C;
}


  </style>
  